<template>
  <div id="app">
    <mt-header title="添 加 住 院 病 人 管 理 信 息">
      <mt-button icon="back" @click="goBack" slot="left">返回</mt-button>
      <mt-button slot="right" @click="goHome">
        <img
          src="../../assets/images/home.png"
          height="20"
          width="20"
          slot="icon"
          style="margin-top: 5px"
        />
      </mt-button>
    </mt-header>

    <!-- 内容区域 -->
    <van-form @submit="confirmSub">
      <van-field
        disabled
        v-model="patientMsg.name"
        name="病人姓名"
        label="病人姓名"
      />
      <van-field
        disabled
        v-model="patientMsg.sex"
        name="病人性别"
        label="病人性别"
      />
      <van-field
        disabled
        v-model="patientMsg.age"
        type="number"
        name="病人年龄"
        label="病人年龄"
      />
      <van-field
        disabled
        v-model="patientMsg.cardId"
        type="number"
        name="病人身份证"
        label="病人身份证"
      />
      <van-field
        clearable
        type="textarea"
        v-model="InputList.description"
        label="病情描述"
        rows="4"
        placeholder="请填写病情描述"
        :rules="[{ required: true, message: '请填写病情描述' }]"
      />
      <van-field
        readonly
        name="name"
        label="选择床位"
        :value="bed"
        placeholder="请选择床位"
        @click="showPicker1 = true"
        :rules="[{ required: true, message: '请选择床位' }]"
      />

      <!-- 床位名称选择器 -->
      <van-popup v-model="showPicker1" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          value-key="name"
          @confirm="onConfirm"
          @cancel="showPicker1 = false"
        />
      </van-popup>

      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </van-form>
  </div>
</template>

<script>
import { Toast } from "vant";
// import { Toast } from "vant";
// import { Dialog } from "vant";
export default {
  name: "AddInfor",

  data() {
    return {
      //需要提交的表单参数
      InputList: {
        description: "", //病情描述
      },
      //病人数据
      patientMsg: {},
      bed: "", //床位名字
      bedId: "", //床位编号
      showPicker1: false,
      columns: [],
    };
  },

  mounted() {},

  created() {
    this.getPatientId();
    this.getbed();
  },

  methods: {
    //返回上一页
    goBack() {
      this.$router.push({
        path: "./hospitalization",
      });
    },
    //返回首页
    goHome() {
      this.$router.push({
        path: "./index",
      });
    },
    //获取病人id
    getPatientId() {
      let id = this.$route.query.id;
      this.$http.get("outpatient-register/" + id, {}).then((res) => {
        // console.log(res);
        this.patientMsg = res.data.data;

        let resMsg = res.data.data;
        this.InputList.name = resMsg.name;
        this.InputList.outpatientId = resMsg.id;
        this.InputList.idcard = resMsg.cardId;

        this.getDoctorName(resMsg.doctorId);
        this.getDepartment(resMsg.departmentId);
      });
    },
    //获取当前病人主治医生
    getDoctorName(id) {
      this.$http.get("doctor/" + id, {}).then((res) => {
        this.InputList.doctor = res.data.data.name;
      });
    },
    //获取科室
    getDepartment(pid) {
      this.$http
        .get("departments", {
          params: {
            departmentId: pid,
          },
        })
        .then((res) => {
          this.InputList.department = res.data.data[0].departmentName;
        });
    },
    //提交按钮
    confirmSub() {
      console.log(this.InputList);
      this.$http
        .post("hospitalization-register", this.InputList)
        .then((res) => {
          console.log(res);
          Toast("添加成功");
          setTimeout(() => {
            this.$router.push({
              path: "./PatientManagement",
            });
          }, 800);
        });
    },
    //获取床位数据
    getbed() {
      this.$http.get("bed", {}).then((res) => {
        console.log(res);
        this.columns = res.data.data;
      });
    },
    //床位名称选择器展开
    onConfirm(value) {
      this.bed = value.name;
      //   console.log(value.name + value.id);
      this.InputList.bed = value.id;
      this.showPicker1 = false;
    },
  },
};
</script>

<style lang="less" scoped>
#app /deep/ .mint-header-title {
  overflow: initial;
}
</style>